<!DOCTYPE html>
<html>

<head>
    <title>Arc</title>
    <script src="d3.min.js"></script>
</head>

<body>
    <svg width="1920" height="1080" id="mainsvg" class="svgs" style='display: block; margin: 0 auto;'></svg>
    <script>
        const svg = d3.select('svg');
        const width = svg.attr('width');
        const height = svg.attr('height');
        const colors = d3.schemeCategory10.concat(d3.schemeDart2).concat(d3.schemeTableau10).concat(d3.schemeSet1).concat(d3.schemePaired);
        const colorNode = d3.scaleOrdinal().range(colors);
        const colorLink = d3.scaleSequential(d3.interpolateBuPu);
        let NODENUM = 1;
        const RADIUS = 5;
        const arcAngle = 45;
        const arcRadii = '1 1'
        const arc = d => {
            return `M ${cx(d.source)} ${cy(d.source)} A ${arcRadii} ${arcAngle} 0 0 ${cx(d.target)} ${cy(d.target)}`;
        }
        const cx = d => 2 * RADIUS + d.ord * width / NODENUM;
        const cy = d => height-100;

        // loading data & initializing the vis. 
        d3.csv('les_miserables_nodes.csv').then(nodes => {
            NODENUM = nodes.length;
        d3.csv('les_miserables_links.csv').then(links => {
            for(let link of links){
                link.source = nodes.find(node => node.id === link.source_id);
                link.target = nodes.find(node => node.id === link.target_id);
            }
            for(let i = 0; i < nodes.length; i++){
                nodes[i].ord = i;
            }

            colorNode.domain(nodes.map(d => d.id));
            colorLink.domain(d3.extent(links.map(d => d.value)));

            svg.selectAll('.myCircle').data(nodes).join('circle').attr('class', 'myCircle')
            .attr('cy', cy).attr('cx', cx).attr('r', RADIUS)
            .attr('stroke', 'black').attr('fill', d => colorNode(d.id));

            svg.selectAll('.myPath').data(links).join('path').attr('class', 'myPath')
            .attr('d', arc).attr('fill', 'none')
            .attr('stroke-width', d => d.value * 0.2).attr('stroke', d => colorLink(d.value));

            svg.selectAll('.myText').data(nodes).join('text').attr('class', 'text')
            .attr('y', cy).attr('x', cx).attr('dy', 10)
            .attr('text-anchor', 'start').attr('writing-mode', 'vertical-rl')
            .text(d => d.name);
        })
        })

    </script>
</body>

</html>